import { User } from '@entities/User'
import { getUser } from '@entities/User/model/selectors/userSelector'
import { UserInfo } from '@entities/User/ui/UserInfo/UserInfo'
import { TranslationButton } from '@features/TranslationButton'
// import { UserRegister } from '@features/RegistrationForm'
import { yupResolver } from '@hookform/resolvers/yup'
import { useUpdateUserMutation } from '@pages/UserSettingsPage/api/userSettingsApi'
import { userSettingsSchema } from '@pages/UserSettingsPage/model/schema/userSettingsSchema'
import { useAppSelector } from '@shared/lib/hooks/redux'
import { Button } from '@shared/ui/Button'
import { CustomInput } from '@shared/ui/CustomInput'
import { FieldError } from '@shared/ui/FieldError'
import { Title } from '@shared/ui/Title'
import { useForm } from 'react-hook-form'
import styles from './UserSettingsPage.module.scss'

export interface UserSettings extends Omit<User, 'confirm'> {
  confirmPassword: string
  lastname?: string
  occupation?: string
}

const UserSettingsPage = () => {
  const [updateUser] = useUpdateUserMutation()
  const { email, id: userId, lastname, name, occupation } = useAppSelector(getUser)
  const {
    formState: { errors, isValid },
    handleSubmit,
    register,
  } = useForm<UserSettings>({
    defaultValues: { email, lastname, name, occupation },
    mode: 'onChange',
    resolver: yupResolver(userSettingsSchema),
  })

  const onSubmit = async (data: UserSettings) => {
    if (userId) {
      const result = await updateUser({ ...data, id: userId })
      console.log(result)
    }
  }

  return (
    <div>
      <Title tag='h2'>Настройки пользователя</Title>
      <div className={styles['user-box']}>
        <UserInfo avatarSize='xl' fontTitle='h4' />
        <TranslationButton />
      </div>
      <div className={styles['form-wrapper']}>
        <form className={styles.form}>
          <div className={styles['input-box']}>
            <div>
              <CustomInput
                label='Имя:'
                name='name'
                placeholder='Имя'
                register={register('name')}
                type='text'
              />
              <FieldError backlight={true}>{errors.name?.message}</FieldError>
            </div>
            <div>
              <CustomInput
                label='Пароль:'
                name='password'
                placeholder='Пароль'
                register={register('password')}
                type='password'
              />
              <FieldError backlight={true}>{errors.password?.message}</FieldError>
            </div>
            <div>
              <CustomInput
                label='Email:'
                name='email'
                placeholder='Email'
                register={register('email')}
                type='email'
              />
              <FieldError backlight={true}>{errors.email?.message}</FieldError>
            </div>
          </div>

          <div className={styles['input-box']}>
            <div>
              <CustomInput
                label='Фамилия:'
                name='lastname'
                placeholder='Фамилия'
                register={register('lastname')}
                type='text'
              />
            </div>
            <div>
              <CustomInput
                label='Подтвердите пароль:'
                name='confirmPassword'
                placeholder='Подтвердите пароль'
                register={register('confirmPassword')}
                type='password'
              />
              <FieldError backlight={true}>{errors.confirmPassword?.message}</FieldError>
            </div>

            <div>
              <CustomInput
                label='Профессия:'
                name='occupation'
                placeholder='Профессия'
                register={register('occupation')}
                type='text'
              />
            </div>
          </div>
        </form>
        <Button
          className={styles.btn}
          color='primary'
          disabled={!isValid}
          filled
          onClick={handleSubmit(onSubmit)}
          type='submit'
        >
          Сохранить
        </Button>
      </div>
    </div>
  )
}
export default UserSettingsPage
